<template>
  <div class="le-matter">
    <div class="flex">
      <div class="he-box he-store flex flex-direction align-center">
        <img :src="store_setting.logo" alt="" class="he-img" />
        <div class="he-status">
          <span class="he-status__text">
            {{ store_setting.run_status ? '营业中' : '打烊中' }}
          </span>
        </div>
        <div class="he-name">
          {{ store_setting.name }}
        </div>
        <div class="he-button flex align-center justify-center">
          <div class="he-left" @click="navigatorTo('/setup/index')">设置</div>
          <div>|</div>
          <div class="he-right">推广</div>
        </div>
        <div class="he-time">
          <span class="he-left"> 到期时间 </span>
          <span class="he-right"> 永久 </span>
        </div>
      </div>
      <div class="he-right-box">
        <div class="flex he-order-user">
          <div class="he-box he-order flex">
            <div class="flex-sub flex flex-direction align-center justify-center">
              <span class="he-top">
                {{ store_count.unpaid }}
              </span>
              <span class="he-bottom"> 待付款订单 </span>
            </div>
            <div class="flex-sub flex flex-direction align-center justify-center">
              <span class="he-top">
                {{ store_count.unsent }}
              </span>
              <span class="he-bottom"> 待发货订单 </span>
            </div>
            <div class="flex-sub flex flex-direction align-center justify-center">
              <span class="he-top">
                {{ store_count.order_after }}
              </span>
              <span class="he-bottom"> 售后订单 </span>
            </div>
          </div>
          <div class="he-box he-user flex">
            <div class="flex-sub flex flex-direction align-center justify-center">
              <span class="he-top">
                {{ store_count.user_number }}
              </span>
              <span class="he-bottom"> 总用户数 </span>
            </div>
            <div class="flex-sub flex flex-direction align-center justify-center">
              <span class="he-top"> ￥{{ store_count.income_amount }} </span>
              <div>
                <span class="he-bottom"> 订单总收入 </span>
                <el-popover content="过售后订单收入" placement="top" trigger="hover">
                  <he-icon class="he-annotation" slot="reference" type="le-icon-annotation"> </he-icon>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
        <div class="he-box he-entrance">
          <div class="he-top flex justify-between">
            <div class="flex align-center">
              <div class="he-sign"></div>
              <div class="he-title">快捷入口</div>
            </div>
          </div>
          <div class="he-bottom flex">
            <div class="flex-sub flex align-center" @click="navigatorTo('/goods/create-goods')">
              <div class="he-button flex align-center justify-center le-icon-share"></div>
              <div class="he-text">发布商品</div>
            </div>
            <div class="flex-sub flex align-center" @click="navigatorTo">
              <div class="he-button flex align-center justify-center le-icon-home"></div>
              <div class="he-text">店铺装修</div>
            </div>
            <div class="flex-sub flex align-center" @click="navigatorTo('/users/index')">
              <div class="he-button flex align-center justify-center le-icon-user-manage"></div>
              <div class="he-text">用户管理</div>
            </div>
            <div class="flex-sub flex align-center" @click="navigatorTo('/order/index')">
              <div class="he-button flex align-center justify-center le-icon-orders"></div>
              <div class="he-text">订单管理</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="he-box he-data">
      <div class="he-top flex justify-between">
        <div class="flex align-center">
          <div class="he-sign"></div>
          <div class="he-title">经营数据</div>
        </div>
      </div>
      <div class="he-bottom flex">
        <div class="flex-sub he-visitors">
          <div class="he-data__canvas">
            <div>
              {{ today_count.today_visit }}
            </div>
            <div>访客数</div>
          </div>
          <div class="he-box__item" id="he-visitors"></div>
        </div>
        <div class="flex-sub he-pay-amount">
          <div class="he-data__canvas">
            <div>¥{{ today_count.today_pay_amount }}</div>
            <div>支付金额</div>
          </div>
          <div class="he-box__item" id="he-pay-amount"></div>
        </div>
        <div class="flex-sub he-visitors">
          <div class="he-data__canvas">
            <div>
              {{ today_count.today_num_order }}
            </div>
            <div>支付订单数</div>
          </div>
          <div class="he-box__item" id="he-num-order"></div>
        </div>
        <div class="flex-sub he-visitors">
          <div class="he-data__canvas">
            <div>
              {{ today_count.today_num_buyer }}
            </div>
            <div>支付买家数</div>
          </div>
          <div class="he-box__item" id="he-num-buyer"></div>
        </div>
      </div>
    </div>
    <div class="he-sale-buy flex justify-between">
      <div class="he-box he-sale">
        <div class="he-top flex justify-between">
          <div class="flex align-center">
            <div class="he-sign"></div>
            <div class="he-title">商品销量排行</div>
          </div>
          <el-button class="he-button" type="primary" @click="exportData('sale')"> 导出 </el-button>
        </div>
        <div class="he-bottom">
          <el-table :data="sale_list" :height="599" style="width: 100%" @sort-change="sortGoods">
            <el-table-column label="排名" width="180">
              <template slot-scope="scope">
                <span class="" v-if="(sale_page.current - 1) * sale_page.size + scope.$index + 1 > 3">
                  {{ (sale_page.current - 1) * sale_page.size + scope.$index + 1 }}
                </span>
                <img
                  v-else-if="(sale_page.current - 1) * sale_page.size + scope.$index + 1 === 1"
                  src="./image/he-rank-1.png"
                  alt=""
                />
                <img
                  v-else-if="(sale_page.current - 1) * sale_page.size + scope.$index + 1 === 2"
                  src="./image/he-rank-2.png"
                  alt=""
                />
                <img
                  v-else-if="(sale_page.current - 1) * sale_page.size + scope.$index + 1 === 3"
                  src="./image/he-rank-3.png"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column label="商品" width="180">
              <template slot-scope="scope">
                <span class="he-line-1 he-goods-name">
                  {{ scope.row.name }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="销售额" prop="sales_amount" sortable="custom">
              <template slot-scope="scope">
                <span class="">
                  {{ scope.row.sales_amount }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="销量" prop="sales" sortable="custom">
              <template slot-scope="scope">
                <span class="">
                  {{ scope.row.sales }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="he-footer flex justify-end">
          <el-pagination
            background
            :current-page="sale_page.current"
            :page-count="sale_page.count"
            @current-change="currentChange($event, 'sale')"
            layout="prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
      <div class="he-box he-buy">
        <div class="he-top flex justify-between">
          <div class="flex align-center">
            <div class="he-sign"></div>
            <div class="he-title">用户购买力排行</div>
          </div>
          <el-button class="he-button" type="primary" @click="exportData('buyer')"> 导出 </el-button>
        </div>
        <div class="he-bottom">
          <el-table :data="buyer_list" :height="599" style="width: 100%" @sort-change="sortUsers">
            <el-table-column label="排名" width="180">
              <template slot-scope="scope">
                <span class="" v-if="(buyer_page.current - 1) * buyer_page.size + scope.$index + 1 > 3">
                  {{ (buyer_page.current - 1) * buyer_page.size + scope.$index + 1 }}
                </span>
                <img
                  v-else-if="(buyer_page.current - 1) * buyer_page.size + scope.$index + 1 === 1"
                  src="./image/he-rank-1.png"
                  alt=""
                />
                <img
                  v-else-if="(buyer_page.current - 1) * buyer_page.size + scope.$index + 1 === 2"
                  src="./image/he-rank-2.png"
                  alt=""
                />
                <img
                  v-else-if="(buyer_page.current - 1) * buyer_page.size + scope.$index + 1 === 3"
                  src="./image/he-rank-3.png"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column label="用户" width="180">
              <template slot-scope="scope">
                <span class="">
                  {{ scope.row.nickname }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="支付金额" prop="buy_amount" sortable="custom">
              <template slot-scope="scope">
                <span class="">
                  {{ scope.row.statistical.buy_amount }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="支付件数" prop="buy_number" sortable="custom">
              <template slot-scope="scope">
                <span class="">
                  {{ scope.row.statistical.buy_number }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="he-footer flex justify-end">
          <el-pagination
            background
            :current-page="buyer_page.current"
            :page-count="buyer_page.count"
            @current-change="currentChange($event, 'buyer')"
            layout="prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import * as echarts from 'echarts';
export default {
  components: {},
  data() {
    return {
      sale_list: [],
      sale_keyword: {
        sort: {
          sales: 'DESC'
        }
      },
      buyer_list: [
        {
          statistical: {
            buy_amount: 0,
            buy_number: 0
          }
        }
      ],
      buyer_keyword: {
        sort: {
          buy_number: 'DESC'
        }
      },
      store_setting: {
        run_status: 0,
        logo: '',
        name: ''
      },
      store_count: {
        unpaid: '0',
        unsent: '0',
        order_after: '0',
        user_number: '0',
        income_amount: '0'
      },
      today_count: {
        today_visit: 0,
        today_pay_amount: 0,
        today_num_order: 0,
        today_num_buyer: 0
      },
      sale_page: {
        size: 10,
        current: 1
      },
      buyer_page: {
        size: 10,
        current: 1
      },
      one: null,
      two: null,
      three: null,
      four: null
    };
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  async mounted() {
    this.one = this.setEcharts('he-visitors');
    this.two = this.setEcharts('he-pay-amount');
    this.three = this.setEcharts('he-num-order');
    this.four = this.setEcharts('he-num-buyer');
    this.getSetting();
    this.getStoreCount();
    this.getNearTwoDay();
    this.getSaleList();
    this.getBuyerList();
  },
  methods: {
    getSetting() {
      this.$heshop
        .search(
          'post',
          { include: 'setting' },
          {
            keyword: 'setting_collection'
          }
        )
        .then(res => {
          let data = res.content;
          this.store_setting = {
            run_status: data.basic_setting.run_status,
            logo: data.store_setting.logo,
            name: data.store_setting.name
          };
        })
        .catch(err => {
          let msg = err.data.message || err.data[0].message;
          this.$message.error(msg);
        });
    },
    getStoreCount() {
      this.$heshop
        .statistical('get', {
          behavior: 'storeCount'
        })
        .then(res => {
          this.store_count = res;
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    getNearTwoDay() {
      this.$heshop
        .statistical('get', {
          behavior: 'nearTwoDay'
        })
        .then(res => {
          this.today_count = res;
          this.setEchartsData('one', [res.today_list.visit_list, res.yesterday_list.visit_list]);
          this.setEchartsData('two', [res.today_list.pay_amount_list, res.yesterday_list.pay_amount_list]);
          this.setEchartsData('three', [res.today_list.num_order_list, res.yesterday_list.num_order_list]);
          this.setEchartsData('four', [res.today_list.num_buyer_list, res.yesterday_list.num_buyer_list]);
        })
        .catch(err => {
          console.error(err);
        });
    },
    getSaleList() {
      this.$heshop
        .search('post', { include: 'goods' }, { keyword: this.sale_keyword })
        .page(this.sale_page.current, this.sale_page.size)
        .then(res => {
          let { data, headers } = res;
          this.sale_list = data;
          this.sale_page = {
            current: +headers['x-pagination-current-page'],
            count: +headers['x-pagination-page-count'] > 10 ? 10 : +headers['x-pagination-page-count'],
            size: +headers['x-pagination-per-page'],
            total: +headers['x-pagination-page-count'] > 10 ? 10 : +headers['x-pagination-page-count']
          };
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    getBuyerList() {
      this.$heshop
        .search('post', { include: 'users' }, { keyword: this.buyer_keyword })
        .page(this.buyer_page.current, this.buyer_page.size)
        .then(res => {
          let { data, headers } = res;
          this.buyer_list = data.map(v => {
            if (!v.statistical) {
              v.statistical = {
                buy_number: 0,
                buy_amount: '0.00'
              };
            }

            return v;
          });
          this.buyer_page = {
            current: +headers['x-pagination-current-page'],
            count: +headers['x-pagination-page-count'] > 10 ? 10 : +headers['x-pagination-page-count'],
            size: +headers['x-pagination-per-page'],
            total: +headers['x-pagination-page-count'] > 10 ? 10 : +headers['x-pagination-page-count']
          };
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    currentChange($event, key) {
      if (key == 'sale') {
        this.sale_page.current = $event;
        this.getSaleList();
      } else {
        this.buyer_page.current = $event;
        this.getBuyerList();
      }
    },
    sortGoods: function (e) {
      this.sale_keyword.sort = {};
      this.sale_keyword.sort[e.prop] = e.order == 'ascending' ? 'ASC' : 'DESC';
      this.getSaleList();
    },
    sortUsers: function (e) {
      this.buyer_keyword.sort = {};
      this.buyer_keyword.sort[e.prop] = e.order == 'ascending' ? 'ASC' : 'DESC';
      this.getBuyerList();
    },
    exportData: function (key) {
      if (key == 'sale') {
        this.$heshop
          .statistical('get', {
            behavior: 'exportGoods',
            sort: JSON.stringify(this.sale_keyword.sort)
          })
          .then(res => {
            this.export2Excel(res.tHeader, res.list, '商品销量');
          })
          .catch(err => {
            console.error(err);
          });
      } else {
        this.$heshop
          .statistical('get', {
            behavior: 'exportUsers',
            sort: JSON.stringify(this.buyer_keyword.sort)
          })
          .then(res => {
            this.export2Excel(res.tHeader, res.list, '用户购买力');
          })
          .catch(err => {
            this.$message.error(err.data.message);
          });
      }
    },
    export2Excel(tHeader, list, name) {
      require.ensure([], () => {
        let { export_json_to_excel } = require('./Export2Excel');
        export_json_to_excel({
          header: tHeader,
          data: list,
          filename: name + '报表(' + this.$moment(new Date()).format('YYYYMMDDHHmmss') + ')'
        });
      });
    },
    setEcharts: function (id) {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: function (params, index) {
            let htmlStr = '';
            for (let i = 0; i < params.length; i++) {
              let param = params[i];
              let xName = param.name;

              let seriesName = param.seriesName;
              let value = param.value;
              let color = param.color;
              if (i === 0) {
                htmlStr += xName + ':00~' + xName + ':59<br/>';
              }
              htmlStr += '<div>';
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                color +
                ';"></span>';
              htmlStr += seriesName + '：' + value;
              htmlStr += '</div>';
            }
            return htmlStr;
          }
        },
        color: ['#623CEB', '#BBBFC8'], // 图例及线条的颜色
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.6)',
              width: 1
            }
          },
          axisTick: {
            interval: 7
          },
          axisLabel: {
            interval: 7
          },
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ]
      };
      let chart = echarts.init(document.getElementById(id));
      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option);
      return chart;
    },
    setEchartsData: function (chart, data) {
      this[chart].setOption({
        series: [
          {
            name: '今日',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              // 折线颜色
              normal: {
                color: '#623CEB',
                width: 2
              }
            },
            data: data[0]
          },
          {
            name: '昨日',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              //折线颜色
              normal: {
                color: '#BBBFC8',
                width: 2
              }
            },
            data: data[1]
          }
        ]
      });
    },
    navigatorTo: function (url) {
      this.$navigateTo(url);
    }
  }
};
</script>
<style lang="scss" scoped="">
.flex {
  display: flex;
}

.flex-direction {
  flex-direction: column;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.align-end {
  align-items: flex-end;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.flex-sub {
  flex: 1;
}

.he-box {
  background: #ffffff;
  border-radius: 16px;
}

.he-store {
  width: 23%;
  height: 308px;
  margin-right: 1.7%;
  padding: 20px;
  position: relative;

  .he-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-top: 12px;
  }

  .he-status {
    background: #ffffff;
    border: 1px solid #53c41a;
    border-radius: 12px;
    padding: 6px 10px;
    line-height: 1;
    position: absolute;
    top: 104px;
  }

  .he-status__text {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #53c41a;
    opacity: 0.85;
  }

  .he-name {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    opacity: 0.85;
    margin-top: 31px;
  }

  .he-button {
    font-size: 14px;
    width: 100%;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #623ceb;
    line-height: 29px;
    margin-top: 7px;
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 21px;

    .he-left,
    .he-right {
      cursor: pointer;
    }

    .he-left {
      margin-right: 10px;
    }

    .he-right {
      margin-left: 10px;
    }
  }

  .he-time {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    line-height: 28px;
    margin-top: 18px;

    .he-left {
      opacity: 0.45;
      margin-right: 8px;
    }

    .he-right {
      opacity: 0.85;
      margin-left: 8px;
    }
  }
}

.he-right-box {
  width: 75.3%;
}

.he-order-user {
  margin-bottom: 24px;

  .he-top {
    font-size: 24px;
    font-family: DINPro;
    font-weight: bold;
    color: #000000;
    opacity: 0.85;
  }

  .he-bottom {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    opacity: 0.45;
  }

  .he-order,
  .he-user {
    height: 140px;
  }

  .he-order {
    width: 54%;
    margin-right: 2%;
  }

  .he-user {
    width: 44%;
  }
}

.he-entrance {
  height: 144px;
  padding: 24px;

  > div {
    cursor: pointer;
  }

  .he-bottom {
    height: 78px;
  }

  .he-button {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .le-icon-share {
    background-image: url('./image/release-goods.png');
  }

  .le-icon-home {
    background-image: url('./image/store-construction.png');
  }

  .le-icon-user-manage {
    background-image: url('./image/user-management.png');
  }

  .le-icon-orders {
    background-image: url('./image/order-management.png');
  }

  .he-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    opacity: 0.85;
  }
}

.he-data {
  margin-top: 24px;
  height: 340px;
  padding: 24px;

  .he-bottom {
    height: 258px;

    > div:not(:last-child) {
      border-right: 1px solid #dcdfe6;
    }
  }

  .he-data__canvas {
    margin-top: 20px;
  }

  .he-data__canvas > div {
    text-align: center;
  }

  .he-data__canvas > div:first-child {
    font-size: 24px;
    font-family: DINPro;
    font-weight: bold;
    color: #000000;
    opacity: 0.85;
  }

  .he-data__canvas > div:last-child {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    opacity: 0.45;
  }

  .he-box__item {
    margin: 0 3.4%;
    height: 180px;
  }
}

.he-sale-buy {
  margin-top: 24px;

  > .he-box {
    width: 49.15%;
    height: 741px;
    padding: 24px;
  }

  .he-top {
    height: 28px;
    margin-bottom: 26px;

    > .he-button {
      width: 56px;
      height: 28px;
      border-radius: 4px;
      padding: 0;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .he-footer {
    height: 68px;
    margin-top: 16px;
  }
}

.he-top {
  .he-sign {
    width: 4px;
    height: 16px;
    background: #623ceb;
    margin-right: 12px;
  }

  .he-title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    opacity: 0.85;
  }
}

.he-annotation {
  color: #bbbfc8;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.he-line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.he-goods-name {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  opacity: 0.85;
  line-height: 30.9px;
  display: inline-block;
}

/deep/.el-table .cell {
  //line-height: 31px;
}

.el-table::before {
  height: 0;
}
</style>
